﻿import React, { Component} from 'react'
import PropTypes from 'prop-types'
import { getCurrentNode } from '@/store/selectors'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import actionsC from '@/store/actions.js'
import * as utils from '@/utils/index.js'
import PanleWrapper from '@/components/panel/panel-wrapper'
import {Button,Select,MenuItem,IconButton} from '@material-ui/core'
import {tags} from '@/const'
import randomColor from 'randomcolor'
import { observer, inject } from 'mobx-react'

// let nodeActions=actionsC()

@inject('rootStore')
@observer
class PanelAdd extends Component {
	constructor(props) {
		super(props);
		this.state={
			tag: 'div',
			tags,
			hot_tags:[]
		};
		this.handleSelectChange = this.handleSelectChange.bind(this)
	}
	componentDidMount(){
	}
	componentWillReceiveProps(nextProp){
	}
	componentDidUpdate(){
	}
	add(){
		const {rootStore} = this.props
		const {nodeTree, currentPath,currentNode,currentDom} = rootStore
		let {addToPath,newNodePath} = utils.newNodePath(currentPath,currentDom,currentNode,nodeTree)
		const {tag} = this.state
		console.log("addToPath", addToPath, tag)
		rootStore.addNode({
			nodeTree: nodeTree,
			path: addToPath,
			node:{
				tag: tag,
				styles: {
					width: 100,
					height: 100,
					background: randomColor({luminosity: 'dark',format: 'rgba',alpha: 0.5})
				}
			},
		})
		//更新当前节点的路径，触发当前节点的设置
		setTimeout(()=>{
			rootStore.updateCurrentPath(newNodePath)
		},0)
	}
	del(){
		const {dispatch, nodeTree, currentPath, rootStore} = this.props
		rootStore.delNode({
			path: currentPath
		})
		rootStore.updateCurrentDom(null)
	}
	tagChange(tag, e){
		this.setState({
			tag: tag
		})
	}
	handleSelectChange(e){
		this.setState({
			tag: e.target.value
		})
	}
	render() {
		let {tags, hot_tags, tag} = this.state
		return (
			<PanleWrapper clsName="panel-tag" panelName="element">
				<Select
					value={tag}
					onChange={this.handleSelectChange}
					name="tag"
					variant="outlined"
				>	
					{utils.render_list(tags,(item, index)=>
						<MenuItem value={item} key={item}>
							{item==tag? <em>{item}</em> : item}
						</MenuItem>
					)}
				</Select>
				<ul className="tag-list">
					{utils.render_list(hot_tags,(item, index)=>{
						return(
							<li key={item}
								className={classnames("tag-item", {active: item==tag})}
								onClick={this.tagChange.bind(this, item)}
							>{item}</li>
						)
					})}
				</ul>
				<div className="btn-box">
					<Button variant="contained" color="primary" onClick={this.add.bind(this)}><i className="fa fa-plus-square"></i></Button>
					<Button variant="contained" color="primary" onClick={this.del.bind(this)}><i className="fa fa-trash"></i></Button>
				</div>
			</PanleWrapper>
		)
	}
}


PanelAdd.defaultProps = {
};

export default PanelAdd